<template>
    <div class="line bold" >
      <div class="line-title">按钮配置</div>
      <div class="line-body">
       <div class="c2">是否显示</div><div class="c3">新名称</div>
      </div>
    </div>
    <div :class="{line : true,bg:idx%2==0 }" v-for="(button,idx) in buttons">
      <div class="line-title" style="width: 100px;">{{button.label}}</div>
      <div class="line-body">
        <div class="c2">
          <el-checkbox v-model="button['show']"/>
        </div>
        <div class="c3">
          <el-input v-model="button['newLabel']"  style="width: 195px" size="small" placeholder="输入新名称" />
        </div>
      </div>
    </div>
</template>

<script>

export default {
  name: "ButtonConfig",
  props:{
    config:{
      type: Object,
      default: {}
    },
    id:{
      type: String,
      default: ''
    },
    attr:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      buttons:[],
      buttonAlls:[
        {label:'同意',value:'approve',show:true,singleApprove:true,multipleApprove:true},
        {label:'不同意',value:'reject',show:true,singleApprove:true,multipleApprove:true},
        {label:'驳回',value:'rollback',show:true,singleApprove:true,multipleApprove:true},
        {label:'委派',value:'delegate',show:true,singleApprove:true,multipleApprove:true},
        {label:'抄送',value:'cc',show:true,singleApprove:true,multipleApprove:true,cc:true,notifier:true},
        {label:'知会',value:'notification',show:true,singleApprove:true,multipleApprove:true,cc:true,notifier:true},
        {label:'知晓',value:'read',show:true,cc:true,notifier:true},
        {label:'认领',value:'claim',show:true,singleApprove:true,multipleApprove:true},
        {label:'归还',value:'unclaim',show:true,singleApprove:true,multipleApprove:true},
        {label:'前加签',value:'after_sign',show:true,multipleApprove:true},
        {label:'后加签',value:'before_sign',show:true,multipleApprove:true},
        {label:'并加签',value:'parallel_sign',show:true,multipleApprove:true},
        {label:'取消',value:'cancel',show:true,singleApprove:true,multipleApprove:true,starter:true},
        {label:'跳转',value:'jump',show:true,singleApprove:true,multipleApprove:true},
        {label:'提交',value:'submit',show:true,singleApprove:true,multipleApprove:true,starter:true},
        {label:'撤回',value:'withdraw',show:true,singleApprove:true,multipleApprove:true,starter:true},
        {label:'暂存',value:'draft',show:true,singleApprove:true,multipleApprove:true,starter:true},
        {label:'发起',value:'send',show:true,starter:true},
        {label:'催办',value:'expedite',show:true,starter:true},
        {label:'重新发起',value:'restart',show:true,starter:true},
        {label:'触发',value:'trigger',show:true,singleApprove:true,multipleApprove:true,starter:true}
      ]
    }
  },
  mounted() {
    this.initButton()
  },
  methods: {
    // 保存
    saveButton(){
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      nodeConfig.buttonConfig=this.buttons
      this.config.nodeConfig[this.id] = nodeConfig
    },
    // 初始化按钮
    initButton(){
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      let tempButtons = nodeConfig.buttonConfig||[]
      if(tempButtons.length==0){
        for (let i = 0; i < this.buttonAlls.length; i++) {
          if(this.buttonAlls[i][this.attr]){
            tempButtons.push(JSON.parse(JSON.stringify(this.buttonAlls[i])))
          }
        }
      }
      this.buttons=tempButtons
    }
  }
}
</script>

<style>
.c1,.c2,.c3 {
  width: 110px;
  float: left;
  padding: 0px 5px;
}
.bold {
  font-weight: bold;
  line-height: 32px;
  margin-bottom: 10px;
  font-size: 14px;
}
.line{
  font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  line-height: 32px;
  clear: both;
}
.line-body {
  font-size: 14px;
}
.line-title{
  float: left;
  width: 200px;
  padding-left: 10px;
  font-size: 14px;
}
</style>
